<template>
	<div class="h-[660px] overflow-y-auto w-full flex flex-col">
		<base-list-plus
			auto
			class="flex-1 max-md:px-3 md:px-[35px]"
			:loading="loading"
			:isFinish="isFinish"
			:isEmpty="isEmpty"
			:error="error"
			@load="search"
			@reload="search(true)">
			<div class="grid max-md:grid-cols-1 md:grid-cols-2 gap-4">
				<follow-item v-for="item in list" :key="item.id" :data="item">
					<template v-if="isMe">
						<!-- 申请中 -->
						<base-button
							v-if="item.followStatus === FollowStatus.RequestedByThem"
							size="tiny"
							disabled
							:block="false"
							class="ml-2">
							{{ $t('follow.requesting') }}
						</base-button>
						<!-- 互相关注 -->
						<base-button
							v-else-if="item.followStatus === FollowStatus.MutualFollow"
							size="tiny"
							disabled
							:block="false"
							class="ml-2">
							{{ $t('follow.bothFollowed') }}
						</base-button>
						<!-- 被拒绝 -->
						<base-button
							v-else-if="item.followStatus === FollowStatus.RejectedByThem"
							size="tiny"
							disabled
							:block="false"
							class="ml-2">
							{{ $t('follow.rejected') }}
						</base-button>
						<!-- 回关 -->
						<base-button
							v-else
							size="tiny"
							:loading="acceptLoading"
							:block="false"
							class="ml-2"
							@click="handeFollow(item)">
							{{ $t('follow.followBack') }}
						</base-button>
					</template>
				</follow-item>
			</div>
		</base-list-plus>
	</div>
</template>
<script lang="ts" setup>
import { computed, watch } from 'vue'
import { BaseButton, BaseListPlus } from '@/components/base'
import { useFollowStore, useProfileStore } from '@/store'
import followItem from './follow-item.vue'
import { getMyFanList, getOtherFanList } from '@/api/user'
import { FollowStatus } from '@/enums'
import { useFollow, useRequest } from '@/hooks'

const profileStore = useProfileStore()
const followStore = useFollowStore()

const isMe = computed(() => profileStore.isMe(followStore.followShow?.userId))

watch(
	() => followStore.followShow?.userId,
	(val: any, oldVal: any) => {
		if (oldVal && val !== oldVal) {
			console.log(oldVal, val)
			search(true)
		}
	}
)
const { run, loading, error, list, isFinish, isEmpty } = useRequest<any>(
	isMe.value ? getMyFanList : getOtherFanList,
	{
		pageSize: 20,
		paramsAlias: { page: 'pageNum' },
		resultAlias: { list: 'rows' }
	}
)

// const { run: runAccept, loading: acceptLoading } = useRequest<any>(followRequest, {
// 	showSuccess: true,
// 	showError: true,
// 	onSuccess: () => {
// 		search(true)
// 	}
// })

const { loading: acceptLoading, followRequest } = useFollow()

const search = (refresh = false) => {
	run(
		{
			id: !isMe.value ? followStore.followShow?.userId : undefined
		},
		{ refresh }
	)
}

search(true)

const handeFollow = async (item: any) => {
	// runAccept({
	// 	targetId: item?.userId
	// })
	await followRequest(item)
}
</script>
